<template>
  <view>
    <view class="page"> 登录页 </view>
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import {
  onLoad,
  onShow,
  onHide,
  onReady,
  onPageScroll,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";
import BasicConfig from "@/utils/config";
import { useLoginStore } from "../../store/modules/login";
import { useLogin, useWechatLogin } from "../../hooks/useLogin";

const getPhoneNumber = async (e) => {
  await useWechatLogin();
  const Store = useLoginStore();
  const { code, msg } = await useLogin({
    openidCode: Store.loginCode,
    phoneCode: e.detail.code,
    recommendId: useGetInviteId(),
  });
  if (code === 200) {
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
    }, 1000);
  }
};
const cancel = () => {
  uni.switchTab({
    url: "/pages/index/index",
  });
};
</script>

<style lang="scss" scoped>
.page {
  width: 100vw;
  height: auto;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% auto;
  // overflow: hidden;

  .container_box {
    // position: absolute;
    // z-index: 2;
    // top: 0;
    width: 100vw;
    // height: 100vh;
    padding: 100rpx 60rpx 0 60rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .img_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-items: center;

      .logo_box {
        display: block;
        width: 482rpx;
        height: 482rpx;
      }

      .login_lg {
        display: block;
        width: 440rpx;
        height: 102rpx;
        margin-top: 20rpx;
        margin-bottom: 200rpx;
      }
    }

    .btn_box {
      margin-top: 150rpx;
      margin-bottom: 150rpx;

      .vx_btn {
        width: 635rpx;
        height: 88rpx;
        background: linear-gradient(270deg, #49a8ff 0%, #1890ff 100%);
        border-radius: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-bottom: 40rpx;

        .vx {
          display: block;
          width: 21px;
          height: 17px;
          margin-right: 38rpx;
        }
      }

      .not_login {
        color: #1890ff;
        text-decoration: underline;
        text-align: center;
        font-size: 36rpx;
      }

      .sj_btn {
        width: 635rpx;
        height: 88rpx;
        background: none;
        border-radius: 44rpx;
        border: 2rpx solid #42a4ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1890ff;

        .sj {
          display: block;
          width: 16px;
          height: 20px;
          margin-right: 38rpx;
        }
      }
    }
  }

  .check-box {
    width: 30rpx;
    height: 30rpx;
    border-radius: 100%;
    background: #ffffff;
    border: 2rpx solid #dadadb;
    position: relative;

    .checked {
      width: 18rpx;
      height: 18rpx;
      border-radius: 100%;
      background: #3ea2ff;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }

  .text_dd {
    color: #8b8b8b;
    display: flex;

    .text {
      color: #1890ff;
      font-weight: 600;
    }
  }

  .role_box {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    top: 0;

    .role_content {
      width: 100vw;
      // height: 500rpx;
      background: #fff;
      border-top-left-radius: 50rpx;
      border-top-right-radius: 50rpx;
      position: absolute;
      bottom: 0;
      left: 0;

      .title {
        color: #1890ff;
        font-size: 32rpx;
        line-height: 107rpx;
        text-align: center;
      }

      .per {
        font-size: 32rpx;
        line-height: 107rpx;
        border-top: 1px solid #e5e5e5;
        text-align: center;
      }

      .gg {
        width: 100vw;
        height: 50rpx;
        background: #f2f2f2;
      }
    }
  }
}
</style>
